<template>
	<s-layout class="wallet-wrap" title="实名认证" :navbar="'normal'" :bgStyle="{ color: '#fff' }">
		<view class="ss-p-x-30 ">
			<view class="filter-box ss-flex">
				<view class="left-box  ss-m-r-10"></view>
				<view class="total-box">请上传身份证正反面</view>
			</view>
			<view class="ss-p-y-30 ss-p-x-50 ss-flex ss-col-center">
				<view class="ss-m-r-14 text">
					头像面
				</view>
				<s-uploader v-model:url="state.ID_front" fileMediatype="image" limit="1" mode="grid"
					:imageStyles="{ width: '580rpx', height: '320rpx' }"></s-uploader>
			</view>
			<view class="ss-p-y-30 ss-p-x-50 ss-flex ss-col-center">
				<view class="ss-m-r-14 text">
					国徽面
				</view>
				<s-uploader v-model:url="state.ID_opposite" fileMediatype="image" limit="1" mode="grid"
					:imageStyles="{ width: '580rpx', height: '320rpx' }"></s-uploader>
			</view>
		</view>
		<view class="ss-p-x-30 ">
			<view class="filter-box ss-flex">
				<view class="left-box ss-m-r-10"></view>
				<view class="total-box">请完善个人信息</view>
			</view>
		</view>
		<view class="ss-p-x-40 border-bottom">
			<uni-forms :model="state.model" :rules="state.rules" labelPosition="left" border>
				<uni-forms-item name="nickname" label="姓名">
					<uni-easyinput v-model="state.model.name" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item name="nickname" label="身份证号">
					<uni-easyinput v-model="state.model.ID_number" :inputBorder="false" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<su-fixed bottom placeholder bg="none">
			<view class="footer-box ss-p-20">
				<button class="ss-rest-button logout-btn " @tap="onSubmit">提交认证</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	import _ from 'lodash';

	const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/wallet_card_bg.png');

	// 数据
	const state = reactive({
		model: {},
		rules: {},
		ID_front: '',
		ID_opposite: '',
	});

	const userInfo = computed(() => sheep.$store('user').userInfo);

	// 提交认证
	async function onSubmit() {
		if(state.ID_front == ''){
			uni.showToast({
				title: '请上传身份证头像照！',
				icon: 'none'
			})
			return
		}
		if(state.ID_opposite == ''){
			uni.showToast({
				title: '请上传身份证国徽照！',
				icon: 'none'
			})
			return
		}
		if(!state.model.name || state.model.name == ''){
			uni.showToast({
				title: '请正确输入姓名！',
				icon: 'none'
			})
			return
		}
		let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
		let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/

		console.log(state.model.name,'idCar', _IDre15.test(state.model.ID_number))
		if (_IDRe18.test(state.model.ID_number) || _IDre15.test(state.model.ID_number)) {
			const {
				code,
				data
			} = await sheep.$api.user.real({
				name: state.model.name,
				ID_number: state.model.ID_number,
				ID_front: state.ID_front,
				ID_opposite: state.ID_opposite,
			});
			if (code == 1) {
				uni.navigateTo({
					url:'/pages/user/address/mes'
				})
				// sheep.$router.back();
			}
		} else {
			uni.showToast({
				title: '请正确输入身份证号！',
				icon: 'none'
			})
		}


	}

	onLoad(async (options) => {

	});
</script>

<style lang="scss" scoped>
	.text {
		width: 60rpx;
	}

	.logout-btn {
		width: 710rpx;
		height: 80rpx;
		background: #252525;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: $white;
	}

	// 筛选
	.filter-box {
		height: 40rpx;
		background-color: #fff;

		.total-box {
			font-size: 29rpx;
			font-weight: 500;
		}

		.left-box {
			width: 4rpx;
			height: 30rpx;
			background: #E84010;
		}

		.date-btn {
			background-color: $white;
			line-height: 54rpx;
			border-radius: 27rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: $dark-6;

			.ss-seldate-icon {
				font-size: 50rpx;
				color: $dark-9;
			}
		}
	}
</style>